@using AntDesign.Charts
@using Title = AntDesign.Charts.Title

    <Tabs>
        <TabPane Key="1">
            <Tab>Example 1</Tab>
            <ChildContent>
                <Pie Data="data1" Config="config1" />
            </ChildContent>
        </TabPane>

        <TabPane Key="2">
            <Tab>Example 2</Tab>
            <ChildContent>
                <Pie Data="data2" Config="config2" />
            </ChildContent>
        </TabPane>

        <TabPane Key="3">
            <Tab>Example 3</Tab>
            <ChildContent>
                <Pie Data="data3" Config="config3" />
            </ChildContent>
        </TabPane>

        <TabPane Key="4">
            <Tab>Example 4</Tab>
            <ChildContent>
                <Pie Data="data4" Config="config4" />
            </ChildContent>
        </TabPane>
    </Tabs>

@code{
    object[] data3 = new object[49];

    protected override async Task OnInitializedAsync()
    {
        for (int i = 1; i < 50; i++)
        {
            Random rd = new Random();
            data3[i - 1] = new { type = $"分类 {i}", value = rd.Next(0, 10) + 1 };
        }

        await base.OnInitializedAsync();

    }

    #region Example 1

    readonly object[] data1 =
{
        new
        {
            type = "Category One",
            value = 27
        },
        new
        {
            type = "Category Two",
            value = 25
        },
        new
        {
            type = "Category Three",
            value = 18
        },
        new
        {
            type = "Category Four",
            value = 15
        },
        new
        {
            type = "Category Five",
            value = 10
        },
        new
        {
            type = "Other",
            value = 5
        }
    };

    readonly PieConfig config1 = new PieConfig
    {
        ForceFit = true,
        Title = new Title
        {
            Visible = true,
            Text = "Multicolor Pie Chart"
        },
        Description = new Description
        {
            Visible = true,
            Text = "Specify the color mapping field (colorField), and the pie slice will be displayed in different colors according to the field data. To specify the color, you need to configure the color as an array. \nWhen the pie chart label type is set to inner, the label will be displayed inside the slice. Set the offset value of the offset control label."
        },
        Radius = 0.8,
        AngleField = "value",
        ColorField = "type",
        Label = new PieLabelConfig
        {
            Visible = true,
            Type = "inner"
        }
    };

    #endregion Example 1

    #region Example 2

    readonly object[] data2 =
    {
        new
        {
            type = "Category One",
            value = 27
        },
        new
        {
            type = "Category Two",
            value = 25
        },
        new
        {
            type = "Category Three",
            value = 18
        },
        new
        {
            type = "Category Four",
            value = 15
        },
        new
        {
            type = "Category Five",
            value = 10
        },
        new
        {
            type = "Other",
            value = 5
        }
    };

    readonly PieConfig config2 = new PieConfig
    {
        ForceFit = true,
        Title = new Title
        {
            Visible = true,
            Text = "Pie chart-outer label"
        },
        Description = new Description
        {
            Visible = true,
            Text = "When the type of the pie chart label is set to outer, the label is displayed on the outside of the slice. Set the offset value of the offset control label."
        },
        Radius = 0.8,
        AngleField = "value",
        ColorField = "type",
        Label = new PieLabelConfig
        {
            Visible = true,
            Type = "outer",
            Offset = 20,
        }
    };

    #endregion Example 2

    #region Example 3


    readonly PieConfig config3 = new PieConfig
    {
        ForceFit = true,
        Title = new Title
        {
            Visible = true,
            Text = "Pie Chart-External Circular Graph Label (outer-center label)"
        },
        Description = new Description
        {
            Visible = true,
            Text = "When the type of the pie chart label is set to outer-center, the label is displayed on the outside of the slice. When the label of the outer-center layout is occluded, it will be directly hidden without shifting and avoiding. Compared with the outer label layout, it is more beautiful"
        },
        Radius = 0.8,
        AngleField = "value",
        ColorField = "type",
        Label = new PieLabelConfig
        {
            Visible = true,
            Type = "outer-center",
        }
    };

    #endregion Example 3

    #region Example 4

    readonly object[] data4 =
    {
        new
        {
            type = "Category One",
            value = 27
        },
        new
        {
            type = "Category Two",
            value = 25
        },
        new
        {
            type = "Category Three",
            value = 18
        },
        new
        {
            type = "Category Four",
            value = 15
        },
        new
        {
            type = "Category Five",
            value = 10
        },
        new
        {
            type = "Other",
            value = 5
        }
    };

    readonly PieConfig config4 = new PieConfig
    {
        ForceFit = true,
        Title = new Title
        {
            Visible = true,
            Text = "Pie Chart-Graphic Tab Spider Layout"
        },
        Description = new Description
        {
            Visible = true,
            Text = "When the type of the pie chart label is set to spider, the labels are divided into two groups, and they are displayed in alignment by pulling lines on both sides of the chart. Generally speaking, the labels of the spider layout are less likely to block each other."
        },
        Radius = 0.8,
        AngleField = "value",
        ColorField = "type",
        Label = new PieLabelConfig
        {
            Visible = true,
            Type = "spider"
        }
    };

    #endregion Example 4

}